<template>
  <div class="container">
    <el-card>
      <div class="search">
        <div class="searcha">关键字:</div>
        <el-input size="mini" v-model="getquestions.keyword" placeholder="请输入内容"></el-input>
      </div>
      <div class="search-btn">
        <el-button size="mini" @click="cleardata">清除</el-button>
        <el-button type="primary" size="mini" @click="searchData">搜索</el-button>
      </div>
      <!-- 提示框 -->
      <el-alert type="info" show-icon :closable="false"> 一共 {{ counts }}条数据</el-alert>
      <!-- 表格 -->
      <el-table :data="questionsData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="190"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="170">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.questionType === '1'">单选</el-tag>
            <el-tag type="info" v-if="scope.row.questionType === '2'">双选</el-tag>
            <el-tag type="warning" v-if="scope.row.questionType === '3'">多选</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="170">
          <template slot-scope="scope">
            <a style="color:skyblue" v-for="(item, index) in scope.row.questionIDs" :key="index" @click="getQuest(item.id)">{{ item.number }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="190">
          <template slot-scope="scope">
            {{ scope.row.addTime | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="140"> </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="140"> </el-table-column>
        <el-table-column prop="userName" label="录入人" width="140"> </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button width="20px " type="danger" icon="el-icon-delete" circle size="mini" @click="deleteData(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="getquestions.pagenum"
        :page-sizes="[10, 20, 30, 35]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
      <!-- 弹出框 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
        <span class="zhanshi">
          <!-- 弹框内部 -->
          <div class="top">
            <el-row>
              <el-col :span="6"
                ><div class="grid-content bg-purple">【题型】:{{ questionType }}</div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple-light">【编号】:{{ querLisy.id }}</div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple">【难度】:{{ difficulty }}</div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple-light">【标签】:{{ querLisy.subjectName }}</div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple-light">【学科】:{{ querLisy.subjectName }}</div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple">【目录】:{{ querLisy.catalogID }}</div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple-light">【方向】:{{ querLisy.direction }}</div></el-col
              >
            </el-row>
          </div>
          <div class="zhong1">
            <el-row>
              <el-col :span="2"><div class="grid-content bg-purple">【题干】:</div></el-col>
              <el-col :span="10">
                <span v-html="querLisy.question" style="line-height: 1px"></span>
              </el-col>

              <el-col :span="24"><div class="grid-content bg-purple">选项：（以下选中的选项为正确答案）</div></el-col>
            </el-row>
          </div>
          <div :class="videoData ? 'zhong22' : 'zhong2'">
            <el-row>
              <el-col :span="3"><div class="grid-content bg-purple">【参考答案】:</div></el-col>
              <el-col :span="21"><el-button type="danger" @click="videoData = !videoData">视频答案预览</el-button></el-col>
              <el-col :span="24" v-show="videoData">
                <video controls :src="querLisy.videoURL" style="width: 200px; background-color: aqua; margin-top:20px"></video>
              </el-col>
            </el-row>
          </div>
          <div class="zhong1">
            <el-row>
              <el-col :span="24"
                ><div class="grid-content bg-purple">【答案解析】:{{ querLisy.remarks }}</div></el-col
              >
            </el-row>
          </div>
          <div class="xia">
            <el-row>
              <el-col :span="24"
                ><div class="grid-content bg-purple">
                  【题目备注】:
                  {{ querLisy.city }}
                </div></el-col
              >
            </el-row>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="btnClose" @click="closeData" type="success">关闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { parseTimeByString } from '@/filters/index.js'
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
export default {
  filters: { parseTimeByString },
  data() {
    return {
      input: '',
      getquestions: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      questionsData: [],
      counts: null,
      dialogVisible: false,
      videoData: false,
      querLisy: []
    }
  },
  created() {
    this.getQuestionsList()
  },
  methods: {
    async getQuestionsList() {
      try {
        const questionsList = await randoms(this.getquestions)
        console.log(questionsList)
        if (questionsList.status !== 200) {
          return this.$message('获取数据失败')
        }
        this.questionsData = questionsList.data.items
        console.log(this.questionsData)
        this.counts = questionsList.data.counts
      } catch (err) {
        console.log(err)
      }
    },
    handleSizeChange(newData) {
      this.getquestions.pagesize = newData
      this.getQuestionsList()
    },
    handleCurrentChange(newData) {
      this.getquestions.page = newData
      this.getQuestionsList()
    },
    cleardata() {
      this.getquestions.keyword = ''
    },
    searchData() {
      // console.log("111");
      this.getQuestionsList()
      // this.getquestions.keyword = "";
    },
    async deleteData(id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log(id)
          const data = removeRandoms(id)
          console.log(data)
          this.$message('删除成功')
          this.getQuestionsList()
        })
        .catch(err => {
          console.log(err)
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleClose(done) {
      this.dialogVisible = false
      this.querLisy = ''
    },
    async getQuest(data) {
      console.log('1')
      console.log(data)
      this.dialogVisible = true
      try {
        const detailData = await detail({ id: data })
        console.log('1')
        console.log(detailData)
        this.querLisy = detailData.data
        console.log(this.querLisy)

        this.$message('获取成功')
      } catch (err) {
        console.log(err)
        this.$message('获取失败')
      }
    },
    closeData() {
      this.dialogVisible = false
      this.querLisy = ''
    }
  },
  computed: {
    difficulty() {
      if (this.querLisy.difficulty === '1') {
        return '简单'
      } else if (this.querLisy.difficulty === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    questionType() {
      if (this.querLisy.questionType === '1') {
        return '单选'
      } else if (this.querLisy.difficulty === '2') {
        return '多选'
      } else {
        return '简答'
      }
    }
  }
}
</script>

<style scoped>
.searcha {
  width: 100px;
  height: 28px;
  line-height: 28px;
  text-align: center;
}
.search {
  width: 200px;
  display: flex;
  justify-content: center;
  vertical-align: middle;
}
.search-btn {
  position: absolute;
  right: 20px;
  top: 20px;
}
.search-btn .el-button {
  width: 60px;
}
.el-alert {
  height: 37px;
  margin-top: 13px;
}
.el-pagination {
  margin-top: 20px;
}
.el-button[data-v-48a0d8d3] {
  width: none;
}
.el-table {
  margin-top: 18px;
}

.zhanshi {
  display: block;
  height: 400px;
}
.zhanshi .top {
  height: 70px;
  border-bottom: 1px solid #000;
}
.el-col {
  height: 30px;
}
.zhong1 {
  height: 50px;
  margin-top: 10px;
  border-bottom: 1px solid rgb(66, 66, 66);
}
.zhong2 {
  height: 50px;
  margin-top: 10px;
  border-bottom: 1px solid rgb(66, 66, 66);
}
.zhong22 {
  height: 200px;
  margin-top: 10px;
  border-bottom: 1px solid rgb(66, 66, 66);
}

.btnClose {
  position: absolute;
  right: 40px;
  bottom: 10px;
}
</style>
